<template>
    <view class="foods-page">
        <view class="foods-page-tabs">
             <view
                v-for="item in tabs"
                :key="item.key"
                class="tab-item"
                :class="{ 'active': activeTab === item.key }"
                @tap="switchTab(item.key)"
            >
                {{ item.label }}
            </view>
        </view>
        <view v-if="activeTab === '1'" class="section section-bottom">
            <view class="detail-title">{{ $t('productDetail.foods.packageContent') }}</view>
            <view v-for="(item, index) in foodsDetail.menu" :key="index">
                <view class="detail-subTitle">{{ item.name }}</view>
                <view v-for="(food, foodIndex) in item.items" :key="foodIndex" class="food">
                    <view class="food-name">{{ food.name }}</view>
                    <view class="food-price">{{ food.price }}</view>
                </view>
            </view>
            <view class="detail-remark" v-if="foodsDetail.remark">{{ foodsDetail.remark }}</view>
        </view>
        <view v-if="activeTab === '2'" class="section section-bottom">
            <view class="detail-title">{{ $t('productDetail.tabs.usageGuide') }}</view>
            <view v-for="(item, index) in foodsDetail.notices" :key="index" class="notice">
                <view class="with-dot">{{ item.title }}</view>
                <view v-for="(content, contentIndex) in item.contents" :key="contentIndex">
                    <view>{{ content }}</view>
                </view>
            </view>
            <view class="detail-title">{{ $t('productDetail.foods.guaranteeService') }}</view>
            <view v-for="(item, index) in foodsDetail.guarantees" :key="index" class="guarantees">
                <view class="guarantees-title">
                    <image v-if="item.icon" :src="item.icon" mode="aspectFit" class="guarantees-title-icon" />
                    <text :class="item.icon ? '' : 'with-dot'" >{{ item.title }}</text>
                </view>
                <view v-for="(description, descriptionsIndex) in item.descriptions" :key="descriptionsIndex">
                    <view>{{ description || ""}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'FoodsDetail',
    props: {
        foodsDetail: {
            type: Object,
            default: () => ({}),
        }
    },
    data() {
        return {
            tabs: [
                {
                    label: this.$t('productDetail.tabs.packageDetails'),
                    key: '1'
                },
                {
                    label: this.$t('productDetail.tabs.noticeGuarantee'),
                    key: '2'
                },
                {
                    label: this.$t('productDetail.tabs.userReviews'),
                    key: '3' 
                }
            ],
            activeTab: '1',
        }
    },
    created() {
        this.switchTab(this.activeTab, false); 
    },
    methods: {
        switchTab(key, flag = true) {
            if (this.activeTab === key && flag) return;
            this.activeTab = key;
            let isShowComment = false;
            if (key === '3') isShowComment = true;
            this.$emit('myHtmlShowComment', isShowComment);
        },
    }
}
</script>

<style lang="scss" scoped>
.foods-page {
    &-tabs {
        display: flex;
        justify-content: space-around;
        border-bottom: 1rpx solid #eee;
        background-color: #fff;
        .tab-item {
            padding: 20rpx 0;
            font-size: 28rpx;
            color: #666;
            &.active {
                color: #ff5f5f;
                font-weight: bold;
                border-bottom: 4rpx solid #ff5f5f;
            }
        }
    }
    .section {
        padding: 30rpx;
        background-color: #fff;
        &-bottom {
            margin-bottom: 30rpx;
        }
    }
    .detail-title {
        font-size: $uni-font-size-lg;
        font-weight: bold;
        line-height: 64rpx;
    }
    .detail-subTitle {
        font-size: $uni-font-size-base;
        font-weight: bold;
        line-height: 48rpx;
    }
    .food {
        display: flex;
        justify-content: space-between;
        font-size: $uni-font-size-sm;
        line-height: 48rpx;
    }
    .detail-remark {
        padding: 24rpx;
        background-color: #e5e7eb;
        font-size: $uni-font-size-base;
        line-height: 48rpx;
    }
    .notice,
    .guarantees {
        font-size: $uni-font-size-base;
        margin-bottom: 24rpx;
    }
    .guarantees-title {
        display: flex;
        align-items: center;
        gap: 10rpx;
        &-icon {
            width: 30rpx;
            height: 30rpx;
            filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
        }
    }
    .with-dot {
        position: relative;
        padding-left: 20rpx;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10rpx;
            height: 10rpx;
            background-color: #ccc;
            border-radius: 50%;
        }
    }
}
</style>